<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>文章标题 - 我的个人博客</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <header class="header">
    <div class="container"></div>
      <h1 class="logo">我的博客</h1>
      <nav class="main-nav">
        <ul>
          <li><a href="index.html">首页</a></li>
          <li><a href="about.html">关于我</a></li>
          <li><a href="#contact">联系我</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="container article-container"></div>
    <article class="article-content">
      <header>
        <h1>HTML5新特性探索</h1>
        <div class="article-meta"></div>
          <span class="author">作者: nn</span>
          <span class="date">发布时间: 2023年5月15日</span>
          <span class="category">分类: 前端开发</span>
        </div>
      </header>

      <img src="./pic/nn.jpg" alt="HTML5" class="featured-image" />

      <div class="article-body"></div>
        <p>
          HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。
        </p>
        <h2>语义化标签</h2>
        <p>
          HTML5引入了许多新的语义化元素，如&lt;header&gt;, &lt;footer&gt;, &lt;article&gt;, &lt;section&gt;等，这些标签让网页结构更加清晰，也便于搜索引擎理解网页内容。
        </p>
        <h2>多媒体支持</h2>
        <p>
          HTML5原生支持音频和视频播放，不再需要Flash等插件。使用&lt;audio&gt;和&lt;video&gt;标签可以轻松地在网页中嵌入多媒体内容。
        </p>
        <pre><code>&lt;video width="320" height="240" controls&gt;
&lt;source src="movie.mp4" type="video/mp4"&gt;
&lt;source src="movie.ogg" type="video/ogg"&gt;
您的浏览器不支持HTML5视频标签。
&lt;/video&gt;</code></pre>
        <h2>Canvas绘图</h2>
        <p>
          HTML5的&lt;canvas&gt;元素提供了一套JavaScript API，允许开发者在网页上绘制图形、动画和游戏。Canvas非常适合创建数据可视化、广告横幅和游戏等。
        </p>
        <h2>本地存储</h2>
        <p>
          HTML5提供了localStorage和sessionStorage两种本地存储方式，可以在客户端存储数据，减少与服务器的通信，提高应用性能。
        </p>
      </div>

      <footer class="article-footer">
        <div class="tags"></div>
          <span>标签: </span>
          <a href="#">HTML5</a>, <a href="#">前端开发</a>, <a href="#">Web技术</a>
        </div>
      </footer>
    </article>

    <section class="comments-section">
      <h2>评论</h2>
      <div id="comments-list"></div>
        <div class="comment"></div>
          <div class="comment-author"></div>
            <img src="./pic/mario1.png" alt="用户头像" />
            <span>马里奥1</span>
          </div>
          <div class="comment-content"></div>
            <p>这篇文章写得很好，对HTML5的新特性介绍得很全面！</p>
            <div class="comment-meta"></div>2023年5月16日</div>
          </div>
        </div>
        <div class="comment"></div>
          <div class="comment-author"></div>
            <img src="./pic/mario2.png" alt="用户头像" />
            <span>马里奥2</span>
          </div>
          <div class="comment-content"></div>
            <p>Canvas部分可以再详细一些，期待后续文章！</p>
            <div class="comment-meta"></div>2023年5月17日</div>
          </div>
        </div>
      </div>

      <form id="comment-form" class="comment-form">
        <h3>发表评论</h3>
        <div class="form-group"></div>
          <label for="name">姓名:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div class="form-group"></div>
          <label for="email">邮箱:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div class="form-group"></div>
          <label for="comment">评论:</label>
          <textarea id="comment" name="comment" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn">提交评论</button>
      </form>
    </section>
  </div>

  <footer class="footer">
    <div class="container"></div>
      <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
      <div class="social-links"></div>
        <a href="#"><i class="fab fa-github"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>
  </footer>

  <button id="back-to-top" title="回到顶部">↑</button>
  <script src="js/script.js"></script>
</body>
</html>
